<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>我的来电列表</title>
  </head>
  <body>
    <div id="usersgrid" class="x-form-item">
    </div>
    <script>
        /*
         * Ext JS Library 2.1
         * Copyright(c) 2006-2008, Ext JS, LLC.
         * licensing@extjs.com
         *
         * http://extjs.com/license
         */
        var userid;
        Ext.onReady(function(){
            //selectedId = -1;//当前选择的数据库ID值
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget = 'side';
            // fix the bug in codepress - resize
            //Ext.BoxComponent.prototype.setSize('100%', '125px');
                
            var CallersLogCM = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
                    id: 'id',
                    header: "Identify",
                    dataIndex: 'id',
                    width: 150,
                    hidden: true
                }, {
                    header: "客户名",
                    width: 80,
                    dataIndex: 'customer_name'
                }, {
                    header: "性别",
                    width: 35,
                    dataIndex: 'customer_sex'
                }, {
                    header: "电话",
                    width: 100,
                    dataIndex: 'phone'
                }, {
                    header: "会员卡号",
                    width: 150,
                    dataIndex: 'customer_no'
                }, {
                    header: "客户证件",
                    width: 150,
                    dataIndex: 'card'
                }, {
                    header: "接线员",
                    width: 50,
                    dataIndex: 'user_name'
                }, {
                    header: "来电时间",
                    width: 130,
                    dataIndex: 'created_at',
                    renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')
                }]);
            /************************************************************
             * connect to backend - grid - core part
             * create the Data Store
             *   connect with backend and list the result in page
             *   through JSON format
             ************************************************************/
            var CallersLogDS = new Ext.data.Store({
                // load using script tags for cross domain, if the data in on the same domain as
                // this page, an HttpProxy would be better
                proxy: new Ext.data.HttpProxy({
                    url: '/users/getMyCallersLog'
                }),
                    
                // create reader that reads the Topic records
                reader: new Ext.data.JsonReader({
                    root: 'root',
                    totalProperty: 'totalProperty',
                    id: 'id'
                }, [{
                        name: 'id'
                    }, {
                        name: 'customer_name',
                        mapping: 'customer.name'
                    }, {
                        name: 'customer_sex',
                        mapping: 'customer.sex'
                    },{
                        name:'phone'
                    }, {
                        name: 'customer_no',
                        mapping: 'customer.customer_no'
                    }, {
                        name: 'card',
                        mapping: 'customer.card'
                    }, {
                        name: 'user_name',
                        mapping: 'user.user_name'
                    },{
                        name:'created_at'
                    }])
            });
                
            /************************************************************
             * add a paging toolbar to the grid's footer
             ************************************************************/
            var myPagingToolbar = new Ext.PagingToolbar({
                pageSize: 20,
                displayInfo: true,
                displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
                emptyMsg: "没有记录",
                store: CallersLogDS
            });
            
            /************************************************************
             * define grid panel now
             ************************************************************/
            var CallersLogGridPanel = new Ext.grid.GridPanel({
                border: false,
                el: 'usersgrid',
                ds: CallersLogDS,
                cm: CallersLogCM,
                width:'100%',
                height:500,
                collapsible: true,
                animCollapse: false,
                title: '我的来电列表',
                loadMask: true,
                //tbar: menubar,
                bbar: myPagingToolbar
            });
                
            //panel render
            CallersLogGridPanel.render();
            // trigger the data store load
            CallersLogDS.load({
                params: {
                    start: 0,
                    limit: 20
                }
            });
            /************************************************************
             * Action - edit
             *   handle double click
             *   user select one of the item and want to update it
             ************************************************************/
            CallersLogGridPanel.on('rowdblclick', function(CallersLogGridPanel, rowIndex, e){
                var callersLogRow = CallersLogDS.getById(CallersLogDS.data.items[rowIndex].id);//ds为绑定到grid的数据源 
                window.document.location.href = "/index/phoneshow?type=repeat&phone_number="+callersLogRow.get("phone");
            });
        });
    </script>
  </body>
</html>
